<!DOCTYPE html>
<!-- saved from url=(0035)https://demo.easyweb.vip/theme.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>EasyWeb主题生成器</title>
<meta name="Keywords" content="eleadmin,easyweb,layui,element ui,vue,admin,后台模板,后台管理模版,后台框架,管理系统">
<meta name="description" content="EleAdmin及EasyWeb是一套通用型后台管理模板，界面美观、开箱即用，拥有丰富的扩展组件和模板页面，适合各类中后台应用。">

    <link href="https://demo.easyweb.vip/iframe/assets/images/favicon.ico" rel="icon">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./EasyWeb主题生成器_files/layui.css">
    <script type="text/javascript" src="./EasyWeb主题生成器_files/layui.js.下载"></script>
<link id="layuicss-layer" rel="stylesheet" href="./EasyWeb主题生成器_files/layer.css" media="all"></head>
<body>
<div class="left-part">
    <iframe src="./EasyWeb主题生成器_files/saved_resource.html" frameborder="0" onload="leftOk()"></iframe>
</div>
<div class="right-part">
    <div class="right-title">EasyWeb主题生成器</div>
    <div class="layui-form" lay-filter="theme-form">
        <div class="item-hr"><span>header</span></div>
        <div class="layui-form-item">
            <label class="layui-form-label">Logo背景颜色</label>
            <div class="layui-input-block">
                <input name="logo_bg" class="layui-input" value="#191a23" color-picker="" lay-vertype="tips" lay-verify="required" required="" readonly="">
            <div class="color-picker-group layui-inline" id="color-picker0"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #191a23"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Logo文字颜色</label>
            <div class="layui-input-block">
                <input name="logo_color" class="layui-input" value="#dddddd" color-picker="" lay-vertype="tips" lay-verify="required" required="" readonly="">
            <div class="color-picker-group layui-inline" id="color-picker1"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #dddddd"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">Logo阴影</label>
            <div class="layui-input-block">
                <select name="logo_shadow" lay-vertype="tips" lay-verify="required" required="">
                    <option value="0">无</option>
                    <option value="1" selected="">轻</option>
                    <option value="2">重</option>
                </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="轻" readonly="" class="layui-input layui-unselect" name=""><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="0" class="">无</dd><dd lay-value="1" class="layui-this">轻</dd><dd lay-value="2" class="">重</dd></dl></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">header背景颜色</label>
            <div class="layui-input-block">
                <input name="header_bg" class="layui-input" value="#ffffff" color-picker="" lay-vertype="tips" lay-verify="required" required="" readonly="">
            <div class="color-picker-group layui-inline" id="color-picker2"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #ffffff"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">header文字颜色</label>
            <div class="layui-input-block">
                <input name="header_color" class="layui-input" value="#595959" color-picker="" lay-vertype="tips" lay-verify="required" required="" readonly="">
            <div class="color-picker-group layui-inline" id="color-picker3"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #595959"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">header选中线条</label>
            <div class="layui-input-block">
                <input name="header_bar" class="layui-input" value="#191a23" color-picker="" lay-vertype="tips" lay-verify="required" required="" readonly="">
            <div class="color-picker-group layui-inline" id="color-picker4"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #191a23"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">header阴影</label>
            <div class="layui-input-block">
                <select name="header_shadow" lay-vertype="tips" lay-verify="required" required="">
                    <option value="0">无</option>
                    <option value="1" selected="">轻</option>
                    <option value="2">重</option>
                </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="轻" readonly="" class="layui-input layui-unselect" name=""><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="0" class="">无</dd><dd lay-value="1" class="layui-this">轻</dd><dd lay-value="2" class="">重</dd></dl></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">header高度</label>
            <div class="layui-input-block">
                <input class="layui-input" name="header_height" type="number" placeholder="默认50(px)">
            </div>
        </div>
        <div class="item-hr"><span>side</span></div>
        <div class="layui-form-item">
            <label class="layui-form-label">侧边栏颜色</label>
            <div class="layui-input-block">
                <input name="side_bg" class="layui-input" value="#191a23" color-picker="" lay-vertype="tips" lay-verify="required" required="" readonly="">
            <div class="color-picker-group layui-inline" id="color-picker5"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #191a23"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">侧边栏阴影</label>
            <div class="layui-input-block">
                <select name="side_shadow" lay-vertype="tips" lay-verify="required" required="">
                    <option value="0">无</option>
                    <option value="1" selected="">轻</option>
                    <option value="2">重</option>
                </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="轻" readonly="" class="layui-input layui-unselect" name=""><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="0" class="">无</dd><dd lay-value="1" class="layui-this">轻</dd><dd lay-value="2" class="">重</dd></dl></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">侧边栏风格</label>
            <div class="layui-input-block">
                <select name="side_style" lay-vertype="tips" lay-verify="required" required="">
                    <option value="dark">暗色系</option>
                    <option value="light">亮色系</option>
                </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="暗色系" readonly="" class="layui-input layui-unselect" name=""><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="dark" class="layui-this">暗色系</dd><dd lay-value="light" class="">亮色系</dd></dl></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">侧边栏图标</label>
            <div class="layui-input-block">
                <select name="side_icon" lay-vertype="tips" lay-verify="required" required="">
                    <option value="default">默认</option>
                    <option value="colorful" selected="">colorful</option>
                </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="colorful" readonly="" class="layui-input layui-unselect" name=""><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="default" class="">默认</dd><dd lay-value="colorful" class="layui-this">colorful</dd></dl></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">侧边栏宽度</label>
            <div class="layui-input-block">
                <input class="layui-input" name="side_width" type="number" placeholder="默认235(px)">
            </div>
        </div>
        <div class="item-hr"><span>body</span></div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项卡风格</label>
            <div class="layui-input-block">
                <select name="tab_style" lay-vertype="tips" lay-verify="required" required="">
                    <option value="default">默认</option>
                    <option value="card">卡片式</option>
                </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="默认" readonly="" class="layui-input layui-unselect" name=""><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="default" class="layui-this">默认</dd><dd lay-value="card" class="">卡片式</dd></dl></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项卡线条</label>
            <div class="layui-input-block">
                <input name="tab_bar" class="layui-input" value="#191a23" color-picker="" lay-vertype="tips" lay-verify="required" required="" readonly="">
            <div class="color-picker-group layui-inline" id="color-picker6"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #191a23"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">弹窗标题背景</label>
            <div class="layui-input-block">
                <input name="dialog_bg" class="layui-input" value="#191a23" color-picker="" lay-vertype="tips" lay-verify="required" required="" readonly="">
            <div class="color-picker-group layui-inline" id="color-picker7"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #191a23"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">弹窗标题颜色</label>
            <div class="layui-input-block">
                <input name="dialog_color" class="layui-input" value="#ffffff" color-picker="" lay-vertype="tips" lay-verify="required" required="" readonly="">
            <div class="color-picker-group layui-inline" id="color-picker8"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #ffffff"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">弹窗标题高度</label>
            <div class="layui-input-block">
                <select name="dialog_title_height">
                    <option value="">50px(默认)</option>
                    <option value="47px,15px">47px</option>
                    <option value="45px,14px">45px</option>
                </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="50px(默认)" value="" readonly="" class="layui-input layui-unselect" name=""><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">50px(默认)</dd><dd lay-value="47px,15px" class="">47px</dd><dd lay-value="45px,14px" class="">45px</dd></dl></div>
            </div>
        </div>
        <div class="item-hr"><span>other</span></div>
        <div class="layui-form-item">
            <label class="layui-form-label">input风格</label>
            <div class="layui-input-block">
                <select name="input_style">
                    <option value="">默认</option>
                    <option value="border">focus加边框</option>
                    <option value="focus">focus加边框+发光</option>
                </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="默认" value="" readonly="" class="layui-input layui-unselect" name=""><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">默认</dd><dd lay-value="border" class="">focus加边框</dd><dd lay-value="focus" class="">focus加边框+发光</dd></dl></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">input高度</label>
            <div class="layui-input-block">
                <select name="input_height">
                    <option value="">38px(默认)</option>
                    <option value="36px,4px,8px,4px,34px">36px</option>
                    <option value="32px,4px,6px,2px,30px">32px</option>
                </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="38px(默认)" value="" readonly="" class="layui-input layui-unselect" name=""><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">38px(默认)</dd><dd lay-value="36px,4px,8px,4px,34px" class="">36px</dd><dd lay-value="32px,4px,6px,2px,30px" class="">32px</dd></dl></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主题颜色</label>
            <div class="layui-input-block">
                <input name="primary_color" class="layui-input" value="#009688" color-picker="" lay-vertype="tips" lay-verify="required" required="" readonly="">
            <div class="color-picker-group layui-inline" id="color-picker9"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #009688"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div></div>
        </div>
        <div class="layui-form-item">
            <label lay-tips="主题补丁解决v3.1.7之前版本的主题对穿梭框、圆角按钮、按钮组、复选框、分页组件输入框、其他颜色按钮等组件的影响" lay-offset="3px,45px" lay-direction="4" class="layui-form-label">
                <i class="layui-icon layui-icon-tips" style="font-size: 12px;"></i> 主题补丁</label>
            <div class="layui-input-block">
                <select name="theme_patch">
                    <option value="">不需要</option>
                    <option value="need">需要</option>
                </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="不需要" value="" readonly="" class="layui-input layui-unselect" name=""><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">不需要</dd><dd lay-value="need" class="">需要</dd></dl></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">主题名称</label>
            <div class="layui-input-block">
                <input name="theme_name" class="layui-input" value="theme-my" lay-vertype="tips" lay-verify="required" required="">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">缩略图</label>
            <div class="layui-input-block">
                <div style="transform: scale(0.96);transform-origin: 0 0;">
                    <canvas id="preCanvas" width="160" height="100" class="pre-canvas"></canvas>
                </div>
            </div>
        </div>
        <i lay-filter="submit-theme" lay-submit="" class="layui-hide"></i>
    </div>
    <div class="right-btn-group">
        <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius" id="btnPreview">预览</button>
        <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius" id="btnDownload">下载</button>
        <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius" id="btnImport">导入</button>
        <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-radius" id="btnExport">导出</button>
    </div>
</div>
<i class="layui-icon layui-icon-close ew-theme-btn-setting"></i>
<div class="layui-form" id="import-from" style="display: none;padding:20px 35px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">系统主题</label>
        <div class="layui-input-block">
            <select name="tab_style" lay-filter="sel-sys-theme">
                <option value="">自定义</option>
                <option value="cyan">藏青主题</option>
                <option value="white">白色主题</option>
                <option value="colorful">colorful主题</option>
                <option value="blue">蓝色主题</option>
            </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="自定义" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-select-tips">自定义</dd><dd lay-value="cyan" class="">藏青主题</dd><dd lay-value="white" class="">白色主题</dd><dd lay-value="colorful" class="">colorful主题</dd><dd lay-value="blue" class="">蓝色主题</dd></dl></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">主题配置</label>
        <div class="layui-input-block">
            <textarea class="layui-textarea" id="edt-import"></textarea>
        </div>
    </div>
</div>
<script>
    eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('x 1f=2l;2R.2S=7(){B(1f){H.1u.2D();H.1e("#1n").13("I")}1S{1f=E}};H.2q(["1u","1a","2B"],7(){x e=H.1e;x f=H.1u;x c=H.1a;x i=H.2B;x a=E;7 b(){e(".U-11-2J").2F();e("[U-11]").47(7(k){x l=e(1c);l.33("3C",E);l.3T().2s(\'<48 4a="U-11-2J" 2k="U-11\'+k+\'">\');i.2e({14:"#U-11"+k,U:l.G(),3f:E,3s:7(m){e(1c.14).2a().G(m)},41:7(m){e(1c.14).2a().G(m)}})})}b();e("#1n").I(7(){a=E;e(\'[P-1K="1h-A"]\').13("I")});e("#4m").I(7(){a=2l;e(\'[P-1K="1h-A"]\').13("I")});c.1r("1h(1h-A)",7(o){g(o.z);o.z.3l=j(o.z.N,".3L");o.z.3M=j(o.z.N,".2");o.z.3Y=j(o.z.N,".1");o.z.43=j(o.z.N,".5");x l=o.z.10.1Q(",");o.z.4b=l[0]||"";o.z.4h=l[1]||"";o.z.4i=l[2]||"";o.z.4j=l[3]||"";o.z.4p=l[4]||"";x k=o.z.17.1Q(",");o.z.2U=k[0]||"";o.z.32=k[1]||"";x m=d(e("#3c-A").1Z(),o.z);x p=e(".28-3y>3z")[0].3A;p.H.1e("#A-2A").2F();p.H.1e("3H").2s(\'<2x 2k="A-2A">\'+m+"</2x>");x n=p.H.1e("2w");n.3X(n.2u("A"));n.3Z(o.z.Y);n.2u("A",o.z.Y);B(!a){f.2y({1Y:"请根据开发文档说明把下面1q放在指定位置",2m:2,1s:m,1N:["4g","1P"],1t:0.1,1j:[]})}});e("#4k").I(7(){f.2y({1Y:"保存下面内容可用于以后导入",2m:2,1N:["1P","4l"],1s:1k.2p(c.G("A-1a")),1t:0.1,1j:[]})});e("#4v").I(7(){e("#1l-1g").G("");e(\'[P-1K="2C-27-A"]\').G("");c.2e("29");f.35({1Y:"导入配置",37:1,1t:0.1,1N:"1P",2b:e("#1g-3d"),1j:["确定","取消"],2f:7(k,l){e(k).3g(".H-1u-2b").1q("3h","3i")},3j:7(m,k){x l=e("#1l-1g").G();B(!l){f.2i("请填写主题配置",{2j:2,3x:6});C}c.G("A-1a",1k.1m(l));g(1k.1m(l));b();e("#1n").13("I");f.2n(m)}})});c.1r("29(2C-27-A)",7(k){B(!k.1s){e("#1l-1g").G("")}1S{e("#1l-1g").G(1k.2p(h[k.1s]))}});B(1f){e("#1n").13("I")}1S{1f=E;f.2i("稍等片刻，马上就好...",{2j:16,1t:0.3I,1T:0})}7 g(k){x l=2t.3O("3R");x m=l.3S("2d");m.3U(0,0,l.3V,l.3W);m.J=k.1d;m.M();m.K(0,0,40,20);m.L();m.O();m.J=k.19;m.M();m.K(0,20,40,4c);m.L();m.O();m.J=k.18;m.M();m.K(40,0,4f,20);m.L();m.O();m.J=k.N;m.M();m.K(2g,30,8,8);m.T(2g,34,4,0,R.Q*2,E);m.T(4o,34,4,0,R.Q*2,E);m.K(2o,30,8,8);m.T(2o,34,4,0,R.Q*2,E);m.T(4q,34,4,0,R.Q*2,E);m.L();m.O();m.J="#4r";m.M();m.K(1o,45,4y,5);m.K(1o,2M,2N,5);m.K(1o,2O,2P,5);m.K(1o,2Q,49,5);m.L();m.O();B("1U"===k.1b){m.J="#2T";m.M();m.T(12,30,4,0,R.Q*2,E);m.L();m.O();m.J="#2V";m.M();m.T(12,46,4,0,R.Q*2,E);m.L();m.O();m.J="#2W";m.M();m.T(12,2X,4,0,R.Q*2,E);m.L();m.O();m.J="#2Y";m.M();m.T(12,2Z,4,0,R.Q*2,E);m.L();m.O()}}g(c.G("A-1a"));7 j(o,n){B(o.31("#")===0){o=o.1p(1,o.1W-1)}B(o.1W===3){o=o[0]+o[0]+o[1]+o[1]+o[2]+o[2]}x m=1X(o.1p(0,2),16);x l=1X(o.1p(2,2),16);x k=1X(o.1p(4,2),16);C"36("+m+","+l+","+k+","+n+")"}7 d(m,n,k,o){B(m===2L||m===38||3a m!=="3b"){C m}B(!n){n={}}B(!k){k="{{"}B(!o){o="}}"}x l={F:7(p){C 2z 3e(p,"g")},1I:7(r,p,s){x q=["#([\\\\s\\\\S])+?","([^{#}])*?"][r||0];C l.F((p||"")+k+q+o+(s||""))},2E:7(p){C 3k(p||"").y(/&(?!#?[a-3m-3n-9]+;)/g,"&3o;").y(/</g,"&3p;").y(/>/g,"&3q;").y(/\'/g,"&#39;").y(/"/g,"&3r;")},1J:7(q,p){3t.1J("3u 3v："+q+"\\n"+(p||""))},1m:7(q,r){x p=q;3w{x t=l.F("^"+k+"#"),u=l.F(o+"$");q=q.y(l.F(k+"#"),k+"# ").y(l.F(o+"}"),"} "+o).y(/\\\\/g,"\\\\\\\\").y(l.F(k+"!(.+?)!"+o),7(v){v=v.y(l.F("^"+k+"!"),"").y(l.F("!"+o),"").y(l.F(k+"|"+o),7(w){C w.y(/(.)/g,"\\\\$1")});C v}).y(/(?="|\')/g,"\\\\").y(l.1I(),7(v){v=v.y(t,"").y(u,"");C\'";\'+v.y(/\\\\/g,"")+\';1L+="\'}).y(l.1I(1),7(v){x w=\'"+(\';B(v.y(/\\s/g,"")===k+o){C""}v=v.y(l.F(k+"|"+o),"");B(/^=/.3B(v)){v=v.y(/^=/,"");w=\'"+2c(\'}C w+v.y(/\\\\/g,"")+\')+"\'}).y(/\\r\\n/g,\'\\\\r\\\\n" + "\').y(/\\n/g,\'\\\\n" + "\').y(/\\r/g,\'\\\\r" + "\');q=\'"2q 3D";x 1L = "\'+q+\'";C 1L;\';q=2z 3E("d, 2c",q);C q(r,l.2E)}3F(s){l.1J(s,p);C p}}};C l.1m(m,n)}e(2t).1r("3G","*[P-V]",7(){x l=e(1c);7 k(m){f.V(m.1Z,m.14,{V:[m.1M||1,m.3J||"#3K"],1T:m.1T||-1,2f:7(n){B(!m.1v){C}x q=m.1v.1Q(",");x p=q[0],o=q.1W>1?q[1]:2L;B(p){e(n).1q("2h-3N",p)}B(o){e(n).1q("2h-28",o)}}})}k({14:1c,1Z:l.1O("P-V"),1M:l.1O("P-1M"),1v:l.1O("P-1v")})}).1r("3P","*[P-V]",7(){f.2D("V")});x h={3Q:{1w:"#D",1x:"#1R",1y:"#1z",18:"#D",1A:"#1V",1B:"1",1d:"#1z",1C:"#42",1D:"1",N:"#44",19:"#1z",1b:"Z",1E:"1",1F:"2v",1G:"#1z",1H:"Z",Y:"A-4e",17:"21,22",1i:"23",10:"24,W,25,W,26"},4n:{1w:"#D",1x:"#1R",1y:"#X",18:"#D",1A:"#1V",1B:"2",1d:"#D",1C:"#2G",1D:"2",N:"#X",19:"#D",1b:"Z",1E:"2",1F:"2H",1G:"#X",1H:"2I",Y:"A-4s",17:"21,22",1i:"23",10:"24,W,25,W,26"},1U:{1w:"#D",1x:"#1R",1y:"#X",18:"#D",1A:"#1V",1B:"2",1d:"#D",1C:"#2G",1D:"2",N:"#X",19:"#D",1b:"1U",1E:"2",1F:"2H",1G:"#X",1H:"2I",Y:"A-4t",17:"21,22",1i:"23",10:"24,W,25,W,26"},4u:{1w:"#15",1x:"#D",1y:"#D",18:"#15",1A:"#D",1B:"1",1d:"#15",1C:"#D",1D:"0",N:"#15",19:"#4w",1b:"Z",1E:"1",1F:"2v",1G:"#15",1H:"Z",Y:"A-4x",17:"",1i:"",10:""}};e(".2K-A-1j-2r").I(7(){e("2w").4d("2K-A-2n-2r")})});',62,283,'|||||||function||||||||||||||||||||||||||var|replace|field|theme|if|return|ffffff|true|exp|val|layui|click|fillStyle|fillRect|closePath|beginPath|primary_color|fill|lay|PI|Math||arc|color|tips|4px|2d8cf0|theme_name|default|input_height|picker||trigger|elem|3C8DBC||dialog_title_height|header_bg|side_bg|form|side_icon|this|logo_bg|jquery|isFirstOk|import|submit|input_style|btn|JSON|edt|parse|btnPreview|50|substr|css|on|value|shade|layer|offset|dialog_bg|dialog_color|header_bar|001529|header_color|header_shadow|logo_color|logo_shadow|side_shadow|side_style|tab_bar|tab_style|query|error|filter|view|direction|area|attr|400px|split|333333|else|time|colorful|393d49|length|parseInt|title|text||47px|15px|border|36px|8px|34px|sys|left|select|prev|content|_escape_||render|success|138|margin|msg|icon|id|false|formType|close|117|stringify|use|setting|append|document|data|dark|body|style|prompt|new|preview|colorpicker|sel|closeAll|escape|remove|262626|light|card|group|ew|undefined|57|79|69|64|81|window|leftOk|61B2FC|dialog_title_height_0|7DD733|32A2D4|62|2BCCCE|78||indexOf|dialog_title_height_1|prop||open|rgba|type|null||typeof|string|tpl|from|RegExp|predefine|children|overflow|visible|yes|String|side_active_bg|zA|Z0|amp|lt|gt|quot|done|console|Laytpl|Error|try|anim|part|iframe|contentWindow|test|readonly|strict|Function|catch|mouseenter|head|01|bg|303133|07|input_shadow_color|top|getElementById|mouseleave|cyan|preCanvas|getContext|parent|clearRect|width|height|removeClass|laydate_sel_color|addClass||change|dddddd|steps_light_color|1890ff|||each|div||class|input_height_0|80|toggleClass|cyan2|120|450px|input_height_1|input_height_2|input_height_3|btnExport|200px|btnDownload|white|146|input_height_4|125|e8eaec|white2|colorful2|blue|btnImport|222D32|blue2|94'.split('|'),0,{}))
</script>
<style>
    body {
        width: 100vw;
        height: 100vh;
        position: fixed;
        overflow: hidden;
    }

    .left-part, .left-part > iframe, .right-part {
        position: absolute;
        top: 0;
        bottom: 0;
        transition: all .3s;
    }

    .left-part {
        left: 0;
        right: 320px;
    }

    .left-part > iframe {
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .right-part {
        right: 0;
        width: 320px;
        background-color: #fff;
        box-shadow: -1px 0 4px rgba(0, 21, 41, .08);
    }

    .right-btn-group {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 15px;
        text-align: center;
    }

    .right-title {
        padding: 15px;
        font-size: 16px;
        text-align: center;
    }

    .right-part > .layui-form {
        padding: 20px 25px 10px 0;
        position: absolute;
        top: 54px;
        bottom: 60px;
        left: 0;
        right: 0;
        overflow: auto;
        border-top: 1px solid #f6f6f6;
        border-bottom: 1px solid #f6f6f6;
    }

    .right-part > .layui-form .layui-form-label {
        width: 100px;
    }

    .right-part > .layui-form .layui-input-block {
        margin-left: 130px;
    }

    .color-picker-group {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0 !important;
    }

    .pre-canvas {
        background: #f5f7f9;
        border: 1px solid #eeeeee;
    }

    .item-hr {
        color: #aaa;
        font-size: 12px;
        text-align: center;
        position: relative;
        margin: 0 0 15px 20px;
    }

    .item-hr span {
        z-index: 1;
        padding: 0 10px;
        position: relative;
        display: inline-block;
        background-color: #fff;
    }

    .item-hr:before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        border-top: 1px dashed #ccc;
    }

    .ew-theme-btn-setting {
        position: fixed;
        top: 50%;
        right: 320px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin-top: -20px;
        color: #fff;
        background-color: #1E9FFF;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
        transition: all .3s;
        text-align: center;
        font-weight: 600;
        cursor: pointer;
    }

    .ew-theme-close-setting .ew-theme-btn-setting {
        right: 0;
        font-weight: 500;
    }

    .ew-theme-close-setting .ew-theme-btn-setting:before {
        content: "\e714";
    }

    .ew-theme-close-setting .right-part {
        right: -320px;
        box-shadow: none;
    }

    .ew-theme-close-setting .left-part {
        right: 0;
    }

    @media screen and (max-width: 700px) {
        .left-part {
            right: 0 !important;
        }

        .right-part {
            right: -320px;
            box-shadow: none;
            z-index: 999;
        }

        .ew-theme-btn-setting {
            right: 0;
            z-index: 999;
        }

        .ew-theme-btn-setting:before {
            content: "\e714";
            font-weight: 500;
        }

        .ew-theme-close-setting .ew-theme-btn-setting {
            right: 320px;
        }

        .ew-theme-close-setting .ew-theme-btn-setting:before {
            content: "\1006";
            font-weight: 600;
        }

        .ew-theme-close-setting .right-part {
            right: 0;
            box-shadow: -1px 0 4px rgba(0, 21, 41, .08);
        }

        .ew-theme-close-setting .left-part:before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 998;
            background-color: rgba(0, 0, 0, .25);
        }

    }

    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        background: transparent;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: #C1C1C1;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #A8A8A8;
    }
</style>
<pre id="tpl-theme" style="display: none;">/** ---------------------------{{ d.theme_name }}主题start----------------------------------- */
/* logo */
.{{ d.theme_name }} .layui-layout-admin .layui-header .layui-logo {
    color: {{ d.logo_color }};
    background-color: {{ d.logo_bg }};
    {{# if(d.logo_shadow=='0'){ }}
    box-shadow: none;
    {{# }else if(d.logo_shadow=='2'){ }}
    box-shadow: 2px 8px 8px 0 rgba(29, 35, 41, .05);
    {{# } }}
}

/* header */
{{# if(d.header_shadow=='0'){ }}
.{{ d.theme_name }} .layui-layout-admin .layui-header {
    box-shadow: none;
}
{{# }else if(d.header_shadow=='2'){ }}
.{{ d.theme_name }} .layui-layout-admin .layui-header {
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
}
{{# } }}

.{{ d.theme_name }} .layui-layout-admin .layui-header {
    background-color: {{ d.header_bg }};
}

.{{ d.theme_name }} .layui-layout-admin .layui-header a {
    color: {{ d.header_color }};
}

.{{ d.theme_name }} .layui-layout-admin .layui-header a:hover {
    color: {{ d.header_color }};
}

.{{ d.theme_name }} .layui-layout-admin .layui-header .layui-nav-child a {
    color: #595959;
}

.{{ d.theme_name }} .layui-layout-admin .layui-header .layui-nav .layui-nav-more {
    border-color: {{ d.header_color }} transparent transparent;
}

.{{ d.theme_name }} .layui-layout-admin .layui-header .layui-nav .layui-nav-mored {
    border-color: transparent transparent {{ d.header_color }};
}

.{{ d.theme_name }} .layui-layout-admin .layui-header .layui-nav .layui-this:after,
.{{ d.theme_name }} .layui-layout-admin .layui-header .layui-nav-bar {
    background-color: {{ d.header_bar }};
}

{{# if(d.header_height){ }}
/* header height */
.{{ d.theme_name }} .layui-header {
    height: {{ d.header_height }}px;
}

.{{ d.theme_name }} .layui-header .layui-logo,
.{{ d.theme_name }} .layui-header .layui-nav .layui-nav-item {
    line-height: {{ d.header_height }}px;
}

.{{ d.theme_name }} .layui-body,
.{{ d.theme_name }} .layui-side {
    top: {{ d.header_height }}px;
}
{{# } }}

/* side */
.{{ d.theme_name }} .layui-layout-admin .layui-side {
    background-color: {{ d.side_bg }};
    {{# if(d.side_shadow=='0'){ }}
    box-shadow: none;
    {{# }else if(d.side_shadow=='2'){ }}
    box-shadow: 2px 8px 8px 0 rgba(29, 35, 41, .05);
    {{# } }}
}

{{# if(d.side_style=='light'){ }}
.{{ d.theme_name }} .layui-side .layui-nav .layui-nav-item a {
    color: #595959;
}

.{{ d.theme_name }} .layui-side .layui-nav .layui-nav-item a:hover {
    color: {{ d.primary_color }};
}

.{{ d.theme_name }} .layui-side .layui-nav-itemed &gt; a,
.{{ d.theme_name }} .layui-side .layui-nav-tree .layui-nav-title a,
.{{ d.theme_name }} .layui-side .layui-nav-tree .layui-nav-title a:hover {
    color: #595959 !important;
}

.{{ d.theme_name }} .layui-side .layui-nav-itemed &gt; a:hover {
    color: {{ d.primary_color }} !important;
}

.{{ d.theme_name }} .layui-side .layui-nav-tree .layui-nav-child dd.layui-this a,
.{{ d.theme_name }} .layui-side .layui-nav-tree .layui-this &gt; a,
.{{ d.theme_name }} .layui-side .layui-nav-tree .layui-this &gt; a:hover {
    color: {{ d.primary_color }};
    background: {{ d.side_active_bg }};
    border-right: 2px solid {{ d.primary_color }};
}

.{{ d.theme_name }} .layui-side .layui-nav-tree .layui-nav-item .layui-nav-child {
    background-color: transparent !important;
}

@media screen and (min-width: 769px) {
    .{{ d.theme_name }} .layui-layout-admin.admin-nav-mini .layui-side .layui-nav li.layui-nav-itemed &gt; a {
        background: {{ d.side_active_bg }};
        color: {{ d.primary_color }} !important;
    }
}

.{{ d.theme_name }} .layui-nav-tree &gt; .layui-nav-item &gt; a:before {
    display: none;
}

/* side arrow */
.{{ d.theme_name }} .layui-side .layui-nav .layui-nav-more {
    border-color: rgba(89, 89, 89, .7) transparent transparent;
}

.{{ d.theme_name }} .layui-side .layui-nav .layui-nav-mored,
.{{ d.theme_name }} .layui-side .layui-nav-itemed &gt; a .layui-nav-more {
    border-color: transparent transparent rgba(89, 89, 89, .7);
}

.{{ d.theme_name }} .layui-side .layui-nav-tree.arrow3 .layui-nav-itemed &gt; a &gt; .layui-nav-more:before {
    background-color: rgba(89, 89, 89, .7);
}

@media screen and (min-width: 769px) {
    .{{ d.theme_name }} .layui-layout-admin.admin-nav-mini .layui-side .layui-nav .admin-nav-hover &gt; .layui-nav-child &gt; dd &gt; a .layui-nav-more {
        border-color: transparent transparent transparent rgba(89, 89, 89, .7);
    }
}
{{# }else{ }}
.{{ d.theme_name }} .layui-nav-tree .layui-nav-child dd.layui-this a,
.{{ d.theme_name }} .layui-nav-tree .layui-this &gt; a,
.{{ d.theme_name }} .layui-nav-tree .layui-this &gt; a:hover {
    background-color: {{ d.primary_color }};
}

.{{ d.theme_name }} .layui-nav-tree &gt; .layui-nav-item &gt; a:before {
    background-color: {{ d.primary_color }};
}
{{# } }}

.{{ d.theme_name }} .layui-layout-admin.admin-nav-mini .layui-side .layui-nav .admin-nav-hover &gt; .layui-nav-child:before {
    background: {{ d.side_bg }} !important;
}

{{# if(d.side_width){ }}
/* side width */
.{{ d.theme_name }} .layui-header .layui-logo,
.{{ d.theme_name }} .layui-side,
.{{ d.theme_name }} .layui-side .layui-nav {
    width: {{ d.side_width }}px;
}

.{{ d.theme_name }} .layui-side .layui-side-scroll {
    width: {{ parseInt(d.side_width)+20 }}px;
}

.{{ d.theme_name }} .layui-body,
.{{ d.theme_name }} .layui-footer {
    left: {{ d.side_width }}px;
}

@media screen and (max-width: 768px) {
    .{{ d.theme_name }} .layui-layout-admin {
        left: -{{ d.side_width }}px;
    }

    .{{ d.theme_name }} .layui-layout-admin.admin-nav-mini .site-mobile-shade {
        left: {{ d.side_width }}px;
    }

    body .layui-layout-admin.admin-nav-mini {
        left: 0;
    }
}
{{# } }}

{{# if(d.side_icon=='colorful'){ }}
/* side icon */
.{{ d.theme_name }} .layui-side .layui-nav-item &gt; a &gt; .layui-icon {
    color: #fff;
    width: 28px;
    height: 28px;
    font-size: 12px !important;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    background-color: #61B2FC;
}

.{{ d.theme_name }} .layui-side .layui-nav-item:nth-child(even) &gt; a &gt; .layui-icon {
    background-color: #7DD733;
}

.{{ d.theme_name }} .layui-side .layui-nav-item:nth-child(3) &gt; a &gt; .layui-icon {
    background-color: #32A2D4;
}

.{{ d.theme_name }} .layui-side .layui-nav-item:nth-child(4) &gt; a &gt; .layui-icon {
    background-color: #2BCCCE;
}

.{{ d.theme_name }} .layui-side .layui-nav-item:nth-child(5) &gt; a &gt; .layui-icon {
    background-color: #7383CF;
}

@media screen and (min-width: 768px) {
    .{{ d.theme_name }} .admin-nav-mini .layui-side .layui-nav-item &gt; a {
        padding-left: 16px;
    }
}

.{{ d.theme_name }} .layui-layout-admin .layui-side .layui-nav .layui-nav-item .layui-nav-child a {
    padding-left: 63px;
}

.{{ d.theme_name }} .layui-layout-admin .layui-side .layui-nav .layui-nav-item .layui-nav-child .layui-nav-child a {
    padding-left: 83px;
}

.{{ d.theme_name }} .layui-layout-admin .layui-side .layui-nav .layui-nav-item .layui-nav-child .layui-nav-child .layui-nav-child a {
    padding-left: 103px;
}

.{{ d.theme_name }} .layui-layout-admin .layui-side .layui-nav .layui-nav-item .layui-nav-child .layui-nav-child .layui-nav-child .layui-nav-child a {
    padding-left: 123px;
}

.{{ d.theme_name }} .layui-side .layui-nav .layui-nav-item a cite {
    vertical-align: middle;
}
{{# } }}

/* body tab */
{{# if('card'==d.tab_style){ }}
.{{ d.theme_name }} .layui-layout-admin .layui-body &gt; .layui-tab &gt; .layui-tab-title {
    top: 8px;
    right: 8px;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    background-color: transparent;
    box-shadow: -4px 4px 0 #f5f7f9;
    padding-right: 70px;
}

.{{ d.theme_name }} .layui-layout-admin .layui-body &gt; .layui-tab &gt; .layui-tab-content {
    top: 40px;
}

.{{ d.theme_name }} .layui-layout-admin .layui-body &gt; .layui-tab &gt; .layui-tab-title li {
    border: none;
    margin-right: 6px;
    border-radius: 4px;
    background-color: #fff;
    line-height: 32px;
    height: 32px;
}

.{{ d.theme_name }} .layui-layout-admin .layui-body &gt; .layui-tab &gt; .layui-tab-title li.layui-this {
    color: {{ d.tab_bar }};
    background-color: #fff;
}

.{{ d.theme_name }} .layui-layout-admin .layui-body &gt; .layui-tab &gt; .layui-tab-title li:hover {
    background-color: #fff;
}

.{{ d.theme_name }} .layui-layout-admin .layui-body &gt; .layui-tab &gt; .layui-tab-title li.layui-this:after {
    display: none;
}

.{{ d.theme_name }} .layui-layout-admin .layui-body &gt; .layui-tab &gt; .layui-tab-title li .layui-tab-close,
.{{ d.theme_name }} .layui-layout-admin .layui-body &gt; .layui-tab &gt; .layui-tab-title li .layui-tab-close:hover {
    top: 8px;
    color: #8c8c8c;
    background-color: transparent;
}

.{{ d.theme_name }} .layui-layout-admin .layui-body .admin-tabs-control,
.{{ d.theme_name }} .layui-layout-admin .layui-body .admin-tabs-control:hover {
    top: 8px;
    height: 32px;
    line-height: 32px;
    background-color: #f5f7f9;
    border: none;
}

.{{ d.theme_name }} .layui-layout-admin .layui-body .admin-tabs-control.layui-icon-down {
    border-radius: 4px;
    background-color: #fff;
    width: 32px;
    right: 8px;
}

.{{ d.theme_name }} .admin-tabs-control &gt; .layui-nav .layui-nav-item {
    line-height: 32px;
}

.{{ d.theme_name }} .admin-tabs-control &gt; .layui-nav .layui-nav-item &gt; a {
    height: 32px;
    width: 32px;
    padding: 0;
}

.{{ d.theme_name }} .admin-tabs-control &gt; .layui-nav .layui-nav-child {
    top: 36px;
    border: none;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
}

.{{ d.theme_name }} .layui-layout-admin .layui-body .admin-tabs-control.layui-icon-prev:before {
    content: "\e603";
}

.{{ d.theme_name }} .layui-layout-admin .layui-body .admin-tabs-control.layui-icon-next:before {
    content: "\e602";
}
{{# }else{ }}
.{{ d.theme_name }} .layui-layout-admin .layui-body &gt; .layui-tab &gt; .layui-tab-title li.layui-this:after {
    background-color: {{ d.tab_bar }};
    {{# if(d.header_bg!='#fff'&amp;&amp;d.header_bg!='#ffffff'){ }}
    top: 38px;
    {{# } }}
}
{{# } }}

/* body title */
.{{ d.theme_name }} .layui-body-header-title {
    border-left-color: {{ d.primary_color }};
}

{{# if('0'==d.header_shadow){ }}
.{{ d.theme_name }} .layui-body-header {
    box-shadow: none;
}
{{# }else if('2'==d.header_shadow){ }}
.{{ d.theme_name }} .layui-body-header {
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
}
{{# } }}

/* admin dialog */
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-title {
    color: {{ d.dialog_color }};
    background-color: {{ d.dialog_bg }};
    {{# if('border'==d.input_style||'focus'==d.input_style){ }}
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    {{# } }}
    {{# if('#fff'==d.dialog_bg||'#ffffff'==d.dialog_bg){ }}
    font-size: 16px;
    padding-left: 23px;
    border-bottom: 1px solid #f1f1f1;
    {{# } }}
}

{{# if('#fff'==d.dialog_bg||'#ffffff'==d.dialog_bg){ }}
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-setwin a {
    color: #8c8c8c;
    font-weight: 600;
}

.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-setwin .layui-layer-min cite {
    background-color: #8c8c8c;
}
{{# } }}

.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-btn .layui-layer-btn0 {
    border-color: {{ d.primary_color }};
    background-color: {{ d.primary_color }};
}

{{# if('border'==d.input_style||'focus'==d.input_style){ }}
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-btn a {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
}

.{{ d.theme_name }} .layui-layer.layui-layer-admin {
    border-radius: 4px;
}
{{# } }}

{{# if(d.dialog_title_height){ }}
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-title {
    height: {{ d.dialog_title_height_0 }};
    line-height: {{ d.dialog_title_height_0 }};
}

.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-setwin {
    top: {{ d.dialog_title_height_1 }};
}
{{# } }}

/* other */
.{{ d.theme_name }} .more-theme-item:hover,
.{{ d.theme_name }} .more-theme-item.active {
    border-color: {{ d.primary_color }};
}

.{{ d.theme_name }} .btn-circle {
    background: {{ d.primary_color }};
}

.{{ d.theme_name }} .ball-loader &gt; span,
.{{ d.theme_name }} .signal-loader &gt; span {
    background-color: {{ d.primary_color }};
}

.{{ d.theme_name }} .text-primary,
.{{ d.theme_name }} .layui-link {
    color: {{ d.primary_color }} !important;;
}

{{# if(d.tab_style=='card'){ }}
.{{ d.theme_name }} .layui-card {
    border-radius: 4px;
    box-shadow: none;
}

.{{ d.theme_name }} .layui-fluid {
    padding-top: 10px;
}
{{# } }}

/* button */
.{{ d.theme_name }} .layui-btn {
    background-color: {{ d.primary_color }};
    {{# if('border'==d.input_style||'focus'==d.input_style){ }}
    box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
    {{# } }}
}

{{# if('border'==d.input_style||'focus'==d.input_style){ }}
/* input */
.{{ d.theme_name }} .layui-input:focus,
.{{ d.theme_name }} .layui-textarea:focus,
.{{ d.theme_name }} xm-select:hover {
    border-color: {{ d.primary_color }} !important;
}

{{# if('focus'==d.input_style){ }}
.{{ d.theme_name }} .layui-input:focus,
.{{ d.theme_name }} .layui-textarea:focus,
.{{ d.theme_name }} .layui-btn:active,
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-btn a:focus,
.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-btn a:active,
.{{ d.theme_name }} xm-select:active {
    box-shadow: 0 0 0 2px {{ d.input_shadow_color }};
}

.{{ d.theme_name }} .layui-form-danger:focus,
.{{ d.theme_name }} .layui-form-danger + .layui-form-select .layui-input {
    box-shadow: 0 0 0 2px rgba(237, 64, 20, .2);
}

.{{ d.theme_name }} .layui-btn.layui-btn-normal:focus,
.{{ d.theme_name }} .layui-btn.layui-btn-normal:active {
    box-shadow-color: rgba(20, 159, 255, .2);
}

.{{ d.theme_name }} .layui-btn.layui-btn-warm:active {
    box-shadow: 0 0 0 2px rgba(255, 184, 0, .2);
}

.{{ d.theme_name }} .layui-btn.layui-btn-danger:active {
    box-shadow: 0 0 0 2px rgba(255, 87, 34, .2);
}
{{# } }}
{{# } }}

{{# if(d.input_height){ }}
/* input、button height */
/* button */
.{{ d.theme_name }} .layui-btn {
    height: {{ d.input_height_0 }};
    line-height: {{ d.input_height_0 }};
    border-radius: {{ d.input_height_1 }};
}

.{{ d.theme_name }} .layui-layer.layui-layer-admin .layui-layer-btn a {
    height: {{ d.input_height_4 }};
    line-height: {{ d.input_height_4 }};
    border-radius: {{ d.input_height_1 }};
}

/* input */
.{{ d.theme_name }} .layui-input,
.{{ d.theme_name }} .layui-select,
.{{ d.theme_name }} .layui-textarea,
.{{ d.theme_name }} xm-select {
    height: {{ d.input_height_0 }};
    border-radius: {{ d.input_height_1 }};
}

/* form */
.{{ d.theme_name }} .layui-form-label,
.{{ d.theme_name }} .layui-form-mid {
    padding-top: {{ d.input_height_2 }};
    padding-bottom: {{ d.input_height_2 }};
}

.{{ d.theme_name }} .layui-input-block {
    min-height: {{ d.input_height_0 }};
}

.{{ d.theme_name }} .layui-form-radio {
    margin-top: {{ d.input_height_3 }};
}

/* button lg sm */
.{{ d.theme_name }} .layui-btn-lg {
    height: 42px;
    line-height: 42px;
}

.{{ d.theme_name }} .layui-btn.layui-btn-sm {
    height: 28px;
    line-height: 28px;
}

.{{ d.theme_name }} .layui-btn.layui-btn-xs {
    height: 22px;
    line-height: 22px;
}
{{# } }}

/* switch */
.{{ d.theme_name }} .layui-form-onswitch {
    border-color: {{ d.primary_color }};
    background-color: {{ d.primary_color }};
}

/* radio */
.{{ d.theme_name }} .layui-form-radio &gt; i:hover,
.{{ d.theme_name }} .layui-form-radioed &gt; i,
.{{ d.theme_name }} .layui-form-checked i,
.{{ d.theme_name }} .layui-form-checked:hover i {
    color: {{ d.primary_color }};
}

/* checkbox */
.{{ d.theme_name }} .layui-form-checked[lay-skin=primary] i,
.{{ d.theme_name }} .layui-form-checked span,
.{{ d.theme_name }} .layui-form-checked:hover span {
    border-color: {{ d.primary_color }} !important;
    background-color: {{ d.primary_color }};
}

.{{ d.theme_name }} .layui-form-checkbox[lay-skin=primary] i:hover,
.{{ d.theme_name }} .layui-form-checkbox[lay-skin=primary]:hover i {
    border-color: {{ d.primary_color }};
}

/* select */
.{{ d.theme_name }} .layui-form-select dl dd.layui-this {
    background-color: {{ d.primary_color }};
}

/* laypage */
.{{ d.theme_name }} .layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: {{ d.primary_color }};
}

.{{ d.theme_name }} .layui-laypage input:focus,
.{{ d.theme_name }} select:focus {
    border-color: {{ d.primary_color }} !important;
}

.{{ d.theme_name }} .layui-laypage a:hover {
    color: {{ d.primary_color }};
}

/* tab */
.{{ d.theme_name }} .layui-tab-brief &gt; .layui-tab-title .layui-this {
    color: {{ d.primary_color }};
}

.{{ d.theme_name }} .layui-tab-brief &gt; .layui-tab-more li.layui-this:after,
.{{ d.theme_name }} .layui-tab-brief &gt; .layui-tab-title .layui-this:after {
    border-color: {{ d.primary_color }} !important;
}

.{{ d.theme_name }} .layui-tab.layui-tab-vertical &gt; .layui-tab-title &gt; li.layui-this {
    border-color: {{ d.primary_color }};
    color: {{ d.primary_color }};
}

/* breadcrumb */
.{{ d.theme_name }} .layui-breadcrumb a:hover {
    color: {{ d.primary_color }} !important;
}

/* laydate */
.{{ d.theme_name }} .layui-laydate-footer span:hover,
.{{ d.theme_name }} .layui-laydate-header i:hover,
.{{ d.theme_name }} .layui-laydate-header span:hover {
    color: {{ d.primary_color }};
}

.{{ d.theme_name }} .layui-laydate .layui-this {
    background-color: {{ d.primary_color }} !important;
}

.{{ d.theme_name }} .layui-laydate-content td.laydate-selected {
    background-color: {{ d.laydate_sel_color }};
}

.{{ d.theme_name }} .laydate-selected:hover {
    background-color: {{ d.laydate_sel_color }} !important;
}

/* timeline */
.{{ d.theme_name }} .layui-timeline-axis {
    color: {{ d.primary_color }};
}

/* transfer */
.{{ d.theme_name }} .layui-transfer-active .layui-btn {
    background-color: {{ d.primary_color }} !important;
    border-color: {{ d.primary_color }} !important;
}

/* progress-bar */
.{{ d.theme_name }} .layui-progress-bar {
    background-color: {{ d.primary_color }};
}

/* slider */
.{{ d.theme_name }} .layui-slider-bar {
    background-color: {{ d.primary_color }} !important;
}

.theme-colorful .layui-slider-wrap-btn {
    border-color: {{ d.primary_color }} !important;
}

/* steps */
.{{ d.theme_name }} .layui-tab.layui-steps &gt; .layui-tab-title &gt; li &gt; .layui-icon {
    color: {{ d.primary_color }};
}

.{{ d.theme_name }} .layui-tab.layui-steps &gt; .layui-tab-title &gt; li &gt; .layui-icon.layui-icon-ok,
.{{ d.theme_name }} .layui-elem-quote {
    border-color: {{ d.primary_color }};
}

.{{ d.theme_name }} .layui-tab.layui-steps &gt; .layui-tab-title &gt; li:before,
.{{ d.theme_name }} .layui-tab.layui-steps &gt; .layui-tab-title &gt; li.layui-this &gt; .layui-icon.layui-icon-ok {
    background-color: {{ d.primary_color }};
}

.{{ d.theme_name }} .layui-tab.layui-steps.layui-steps-simple &gt; .layui-tab-title &gt; li {
    background-color: {{ d.steps_light_color }};
}

.{{ d.theme_name }} .layui-tab.layui-steps.layui-steps-simple &gt; .layui-tab-title &gt; li.layui-this {
    background-color: {{ d.primary_color }};
}

.{{ d.theme_name }} .layui-tab.layui-steps.layui-steps-simple &gt; .layui-tab-title &gt; li:after {
    border-left-color: {{ d.steps_light_color }} !important;
}

.{{ d.theme_name }} .layui-tab.layui-steps.layui-steps-simple &gt; .layui-tab-title &gt; li.layui-this + li:after {
    border-left-color: {{ d.primary_color }} !important;
}

/* xmSelect */
.{{ d.theme_name }} xm-select .xm-body .xm-option .xm-option-icon {
    border-color: {{ d.primary_color }} !important;
}

.{{ d.theme_name }} xm-select .xm-body .xm-option.selected .xm-option-icon,
.{{ d.theme_name }} xm-select &gt; .xm-body .xm-toolbar .toolbar-tag:hover,
.{{ d.theme_name }} .ew-xmselect-tree xm-select .xm-body .xm-option.selected .xm-option-content {
    color: {{ d.primary_color }} !important;
}

.{{ d.theme_name }} xm-select .xm-label .xm-label-block,
.{{ d.theme_name }} xm-select &gt; .xm-body .xm-option.hide-icon.selected {
    background-color: {{ d.primary_color }} !important;
}

/* tagsinput */
.{{ d.theme_name }} div.tagsinput span.tag {
    background: {{ d.primary_color }};
}

/* cascader */
.{{ d.theme_name }} .ew-cascader-dropdown-list-item.active,
.{{ d.theme_name }} .ew-cascader-dropdown-list-item.active .ew-icon-right {
    color: {{ d.primary_color }};
}

/* city-select */
.{{ d.theme_name }} .city-select a.active {
    color: #fff !important;
    background-color: {{ d.primary_color }} !important;
}

.{{ d.theme_name }} .city-select a:hover,
.{{ d.theme_name }} .city-select a:focus {
    background-color: {{ d.side_active_bg }};
    color: {{ d.primary_color }};
}

.{{ d.theme_name }} .city-picker-span &gt; .title &gt; span:hover {
    background-color: {{ d.side_active_bg }};
}

.{{ d.theme_name }} .city-select-tab &gt; a.active {
    color: {{ d.primary_color }};
}

{{# if(d.theme_patch){ }}
/* theme patch */
/* checkbox */
body .layui-form-checked[lay-skin=primary] i,
body .layui-form-checked[lay-skin=primary]:hover i {
    color: #fff;
}

body .layui-form-checkbox[lay-skin=primary] span,
body .layui-form-checkbox[lay-skin=primary]:hover span {
    background-color: transparent;
}

/* form danger */
body .layui-form-danger + .layui-form-select .layui-input,
body .layui-input.layui-form-danger:focus,
body .layui-textarea.layui-form-danger:focus {
    border-color: #FF5722 !important;
}

/* laypage */
body .layui-laypage input.layui-input {
    height: 30px;
    line-height: 30px;
}

body .layui-table-page .layui-laypage input.layui-input {
    height: 26px;
    line-height: 26px;
}

/* button */
body .layui-btn.layui-btn-radius {
    border-radius: 100px;
}

.layui-btn-primary:hover, .layui-btn-group .layui-btn-primary:hover {
    color: #262626;
    border-color: #e6e6e6;
}

.layui-btn-group .layui-btn-primary:first-child {
    border-left: 1px solid #e6e6e6;
}

body .layui-btn.layui-btn-disabled,
body .layui-transfer-active .layui-btn.layui-btn-disabled {
    background-color: #FBFBFB !important;
    border-color: #e6e6e6 !important;
    color: #C9C9C9 !important;
}

body .layui-btn.layui-btn-primary {
    background-color: #fff;
}

body .layui-btn.layui-btn-normal {
    background-color: #1E9FFF;
}

body .layui-btn.layui-btn-warm {
    background-color: #FFB800;
}

body .layui-btn.layui-btn-danger {
    background-color: #FF5722;
}

.layui-btn-group &gt; .layui-btn + .layui-btn {
    border-radius: 0;
}

.layui-btn-group &gt; .layui-btn:last-child {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.layui-transfer-active .layui-btn {
    background-color: #5FB878 !important;
    border-color: #5FB878 !important;
    color: #fff !important;
}
{{# } }}
/** ---------------------------{{ d.theme_name }}主题end----------------------------------- */
</pre>

<div class="layui-layer-move"></div></body></html>